<template>
    <div class="clothing_spec_form_container">
        <el-form ref="clothingSpecForm" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="颜色" prop="colors">
                <el-input v-model="formData.colors" placeholder="请输入颜色，可用逗号或空格分割多个值，例如：白色，红色，绿色" clearable />
            </el-form-item>
            <el-form-item label="尺寸" prop="sizes">
                <el-select v-model="formData.sizes" style="width: 100%;" placeholder="请选择规格" clearable>
                    <el-option v-for="(item, index) in clothPresetSizeList"
                               :key="index" :value="item.value" :label="item.label" />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "ClothingSpecForm",
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        const _this = this;
        return {
            formData: {},
            rules: {
                colors: [ { required: true, message: '请输入颜色，可用逗号分割多个值，例如：白色，红色，绿色', trigger: 'blur' } ],
                sizes: [ { required: true, message: '请选择规格', trigger: 'blur' } ],
            },
            setting: {},
            clothPresetSizeList: [],
        }
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            await _this.getInitSetting();
            _this.formData = {
                goods_sid: _this.row.sid,
                colors: _this.row.color_spec,
                sizes: _this.row.size_spec,
            };
        },
        //
        async getInitSetting() {
            const _this = this;
            _this.clothPresetSizeList = [];
            _this.setting = await _this.$store.dispatch('jxc/initSetting');
            if (_this.setting.clothing_preset_size) {
                let clothing_preset_size = _this.setting.clothing_preset_size.replaceAll(/[;；]/g, ';').split(";");
                clothing_preset_size.forEach(item => {
                    _this.clothPresetSizeList.push({
                        value: item,
                        label: item,
                    });
                })
            }
        },
        //
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('clothingSpecForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.formData);
            return _this.fetchData(_this.$api.API_SaveClothingJxcGoodsSpecification, subData).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" scoped>
.clothing_spec_form_container {

}
</style>
